<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../vue.js" charset="utf-8"></script>
  </head>
  <body>
	<div id="demo">
		<custom-compont :root="root"></custom-compont>
	</div>
	<script type="x-template" id="custom">
		<div @click='abc'>
			<ul>
				<template v-for="(item,index) of items">
					<my-compont :prop="item"></my-compont>
				</template>
			</ul>
			<a href="javascript:;" @click="another">hello,component!</a>
		</div>
	</script>
	<script type="x-template" id="sub">
		<div>
			<a href="javascript:;" @click="abc">dw</a>
		</div>
	</script>
	<script type="text/javascript">
		//全局注册组件
		//烤串命名法
		Vue.component("custom-compont",{
		    template:"#custom",
				props: ['root'],
				computed: {
					ef(){
						return this.root;
					}
				},
				watch:{
					value:{
						handler(val){
							console.log(val, 'sub');
						},
						immediate:true
					}
				},
				beforeUpdate () {
					console.log('beforeUpdate');
				},
				data:function(){
					return {
						items:[{},{}]
					}
				},
				methods: {
					abc(){
						console.log("super", this.items);
					},
					another(){
						this.root.abc= 1;
					}
				}
		});
		//驼峰命名法
		Vue.component("myCompont",{
			template:'#sub',
				props:["prop"],
				data(){
					return {
						data:[1]
					}
				},
				watch:{
					// data(val){
					// 	console.log(val, 'sup');
					// },
					// immediate:true
				},
				methods: {
					abc(){
						this.prop.abc='abc';
						console.log(this.value);
						// this.data = [1];
					}
				}
		});
		//初始化根实例（root instance）
		var vm = new Vue({
			el:"#demo",
			data:{
				root:{},
				abc:1
			},
			beforeUpdate () {
					console.log('demo beforeUpdate');
			},
		});
	</script>
  </body>
</html>
